<template>
  <div class="houseDetail">
    <hunk-head name="房源详情"></hunk-head>
    <div class="houseTenter">
      <div class="tenantSwiper">
        <swiper class="swiper" :indicator-dots="indicatorDots" indicator-color="rgba(255, 255, 255, .55)" indicator-active-color="#fff"	circular="true" :duration="duration" @change="swiperChange">
          <swiper-item   @click="imgPreview(houseDetailInfo.photoslist,index)" v-for="(item,index) in houseDetailInfo.photoslist" :key="index" >
            <img mode="aspectFit" class="swiper-item" :src="item">
          </swiper-item>
        </swiper>
        <div class="num">
          <span>{{nowNum}}</span>
          <span>/</span>
          <span>{{houseDetailInfo.photoslist.length}}</span>
        </div>
      </div>
      <div class="houseCenter">
        <div class="top">
          <div class="top-left">
            <div class="yuan">
              {{houseDetailInfo.lowrent}}
              <span>元/月</span>
            </div>
            <!-- <div class="fu">月付</div> -->
          </div>
        </div>
        <div class="addr">
          {{houseDetailInfo.housetitle}}
        </div>
        <div class="detail">
          <div class="item">
            <div class="item-top">{{houseDetailInfo.roomtype}}室</div>
            <div class="bom">户型</div>
          </div>
          <div class="shu"></div>
          <div class="item">
            <div class="item-top">{{houseDetailInfo.roomarea}}平米</div>
            <div class="bom">面积</div>
          </div>
          <div class="shu"></div>
          <div class="item">
            <div class="item-top">{{houseDetailInfo.renovation}}</div>
            <div class="bom">装修</div>
          </div>
        </div>
      </div>
      <div class="ptss">
        <div class="pt-top">配套设施</div>
        <div class="pt-list">
          <div class="pt-item" v-for="(item,index) in houseDetailInfo.dictMap" :key="index">
            <img :src="item.cssclass" alt="">
            <div>{{item.dictlabel}}</div>
          </div>
        </div>
      </div>
      <!-- <div class="fyxq">
        <div class="pt-top">费用详情</div>
        <div class="fyxq-lits">
          <div class="fy-itme">
            <div class="fy-one">交付周期</div>
            <div>15</div>
          </div>
          <div class="fy-itme">
            <div class="fy-one">租金(元/月)</div>
            <div>7878.24</div>
          </div>
          <div class="fy-itme">
            <div class="fy-one">优惠</div>
            <div>15</div>
          </div>
          <div class="fy-itme">
            <div class="fy-one">最短租期(月)</div>
            <div>15</div>
          </div>
          <div class="fy-itme">
            <div class="fy-one">押金(元)</div>
            <div>00.00</div>
          </div>
          <div class="fy-itme">
            <div class="fy-one">手续费(元)</div>
            <div>00.00</div>
          </div>
        </div>
      </div> -->
    </div>
    
    <div class="btn" v-if="!isList">
      <picker class='one' mode="multiSelector" @change="bindStartMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
        <div @click="setInfo(item)" class="one">预约看房</div>
      </picker>
    </div>
    <uni-popup ref="popup" type="center">
      <div class="tips">
        <div class="tips-top">提示</div>
        <div class="tips-text">
          请在首页查询预约状态，以及房东联系方式
        </div>
        <div class="tips-text">
          预约时间：{{datetimerange}}
        </div>
        <div class="tips-btn">
          <div class="btn-closs" @click="lianxi">取消</div>
          <div  @click="checkPopup">确认</div>
        </div>
      </div>
    </uni-popup>
    <uni-popup ref="popup1" type="center">
      <div class="tips1">
        <div class="tips-top">认证授权</div>
        <div class="tips-text">尊敬的用户，您还未进行实名认证，是否进行实名认证</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closePopup1">取消</div>
          <div  @click="gorenzheng">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import {Save} from '@/apis/tenant/reserve'
import { SharHouseInfo } from '@/apis/share'
import store from '@store/index'
import {formatTime,format_chinese_date} from '@utils/util'
import {GetUserInfo_openid,getuseropenid} from '@/apis/user'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      isList:false,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
      bannerList: [1,2],
      nowNum:1,
      current_date: null,
      datetimerange: "",
      weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      multiArray: [['今天', '明天'], [1, 2, 3, 4, 5, 6], [0, 30]],
      multiIndex: [0, 0, 0],
      start:'',
      end: '',
      clickInfo:null,
      houseid: '',
      shareUserId:'',
      houseDetailInfo:null
    }
  },
  computed:{
    userInfo() {
      return this.$store.state.baseStore.userInfo
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    },
  },
  onLoad(e){
    if(e.isList){
      this.isList = true
    }
    this.current_date= new Date()
    // this.isShouquan()
    this.houseid = e.query
    this.shareUserId = e.shareUserId
    console.log('999this.houseid',this.houseid,e.query)
    // this.houseid = 160
    this.SharHouseInfo(this.houseid)
  },
  // onShareAppMessage(res) {
  //   if (res.from === 'button') {
  //     console.log('点击分享',res.target)
  //   }
  //   return {
  //     title: '',
  //     path: '/pages/link/houseDetail?query='+this.houseid
  //   }
  // },
  methods: {
    imgPreview(e,index){
      wx.previewImage({
        urls:e,
        current:index
      })
    },
    swiperChange(e){
      // console.log(9999,e)
      this.nowNum = e.detail.current + 1
    },
    checkPopup(){
      // console.log('预约9999',this.)
      let data ={
        "endtime": this.end,
        "houseid": this.houseDetailInfo.houseid,
        "houseroomid": this.houseDetailInfo.houseroomid,
        "riqi": this.riqi,
        "starttime": this.start[1]+"",
        "userid": this.userInfo.userid,
        'shareuserid':this.shareUserId
      }
      console.log('预约9999',data)
      let that = this
      Save(data).then(res=>{
        uni.showToast({
          title: res.msg,
          icon: 'none',
          success:()=>{
            that.$refs.popup.close()
          }
        })
      })
    },
    setInfo(item){
      this.clickInfo = item
    },
    closePopup1(){
      this.$refs.popup1.close()
    },
    lianxi(){
      this.$refs.popup.close()
    },
    SharHouseInfo(id){
      let that = this
      SharHouseInfo({houseid:id}).then(res=>{
        if(res.code == 200){
          that.houseDetailInfo = res.data
          console.log(97777,res.data)
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    pickerTap() {
      let date = new Date();
      var monthDay = [];
      var hours = [];
      var minute = [];
      
      this.currentHours = date.getHours();
      this.currentMinute = date.getMinutes();
      var today = date.getDay();//获取存储当前日期
      monthDay.push('今天 ' + this.weekday[today]);
      if(today === 6) {
        monthDay.push('明天 ' + this.weekday[0]);
      }else {
        monthDay.push('明天 ' + this.weekday[today + 1]);
      }

      let multiIndex = this.multiIndex;
      if(multiIndex[0] === 0) {
        if(multiIndex[1] === 0) {
          this.loadData(hours, minute);
        } else {
          this.loadMinute(hours, minute);
        }
      } else {
        this.loadHoursMinute(hours, minute);
      }
      this.multiArray[0] = monthDay;
      this.multiArray[1] = hours;
      this.multiArray[2] = minute;
    },
    bindMultiPickerColumnChange:function(e) {
      let date = new Date();
      var that = this;
      var monthDay = ['今天', '明天'];
      var hours = [];
      var minute = [];

      this.currentHours = date.getHours();
      this.currentMinute = date.getMinutes();

      // 把选择的对应值赋值给 multiIndex
      this.multiIndex[e.detail.column] = e.detail.value;
      // console.log('滚动',e.detail)
      // 然后再判断当前改变的是哪一列,如果是第1列改变
      if (e.detail.column === 0) {
        // 如果第一列滚动到第一行
        if (e.detail.value === 0) {
          let aa = that.loadData(hours, minute)
          hours = aa.hours
          minute = aa.minute
        } else {
          let aa = that.loadHoursMinute(hours, minute)
          hours = aa.hours
          minute = aa.minute
        }
        this.multiIndex[1] = 0;
        this.multiIndex[2] = 0;
        // 如果是第2列改变
      } else if (e.detail.column === 1) {
        // 如果第一列为今天
        if (this.multiIndex[0] === 0) {
          if (e.detail.value === 0) {
            // that.loadData(hours, minute)
            let aa = that.loadData(hours, minute)
            hours = aa.hours
            minute = aa.minute
          } else {
            // that.loadMinute(hours, minute)
            let aa = that.loadMinute(hours, minute)
            hours = aa.hours
            minute = aa.minute
          }
          // 第一列不为今天
        } else {
          // that.loadHoursMinute(hours, minute)
          let aa = that.loadHoursMinute(hours, minute)
          hours = aa.hours
          minute = aa.minute
        }
        this.multiIndex[2] = 0;

        // 如果是第3列改变
      } else {
        // 如果第一列为'今天'
        if (multiIndex[0] === 0) {
          // 如果第一列为 '今天'并且第二列为当前时间
          if(this.multiIndex[1] === 0) {
            // that.loadData(hours, minute)
            let aa = that.loadData(hours, minute)
            hours = aa.hours
            minute = aa.minute
          } else {
            // that.loadMinute(hours, minute)
            let aa = that.loadMinute(hours, minute)
            hours = aa.hours
            minute = aa.minute
          }
        } else {
          // that.loadHoursMinute(hours, minute)
          let aa = that.loadHoursMinute(hours, minute)
          hours = aa.hours
          minute = aa.minute
        }
      }
      this.multiArray[1] = hours;
      this.multiArray[2] = minute;
      this.$forceUpdate()
    },
    loadData: function (hours, minute) {
      var minuteIndex;
      if (this.currentMinute > 0 && this.currentMinute <= 30) {
        minuteIndex = 30;
      } else {
        minuteIndex = 60;
      }

      if (minuteIndex == 60) {
        // 时
        for (var i = this.currentHours + 1; i < 24; i++) {
          hours.push(i);
        }
        // 分
        for (var i = 0; i < 60; i += 30) {
          minute.push(i);
        }
      } else {
        // 时
        for (var i = this.currentHours; i < 24; i++) {
          hours.push(i);
        }
        // 分
        for (var i = minuteIndex; i < 60; i += 30) {
          minute.push(i);
        }
      }
      return {
        hours:hours,minute:minute
      }
    },
    loadHoursMinute: function (hours, minute){
      // 时
      for (var i = 0; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = 0; i < 60; i += 30) {
        minute.push(i);
      }
      return {
        hours:hours,minute:minute
      }
    },
    loadMinute: function (hours, minute) {
      var minuteIndex;
      if (this.currentMinute > 0 && this.currentMinute <= 30) {
        minuteIndex = 30;
      } else {
        minuteIndex = 60;
      }
      if (minuteIndex == 60) {
        // 时
        for (var i = this.currentHours + 1; i < 24; i++) {
          hours.push(i);
        }
      } else {
        // 时
        for (var i = this.currentHours; i < 24; i++) {
          hours.push(i);
        }
      }
      // 分
      for (var i = 0; i < 60; i += 30) {
        minute.push(i);
      }
      return {
        hours:hours,minute:minute
      }
    },
    async bindStartMultiPickerChange(e) {
      var that = this, start_date = null, start_date_text = '', end_date = null, end_date_text = '', _date = that.current_date;
      const day = that.current_date.getDate();
      const day_index = e.detail.value[0];
      let hours = that.multiArray[1][e.detail.value[1]];
      let minute = that.multiArray[2][e.detail.value[2]];

      if (day_index === 0) {
      } else if (day_index === 1) {
        _date.setDate(day + 1);
      }
      _date.setHours(hours)
      _date.setMinutes(minute)
      _date.setSeconds(0)
      start_date = formatTime(new Date(_date.valueOf()));
      start_date_text = format_chinese_date(_date);
      _date.setMinutes(_date.getMinutes() + 30);
      end_date = formatTime(new Date(_date.valueOf()));
      end_date_text = (_date.getHours() === 0 ? "24" : _date.getHours()) + ":" + (_date.getMinutes()=== 0 ? "00": _date.getMinutes());
      this.datetimerange= start_date_text + '-' + end_date_text
      this.start = start_date_text.split(' ')
      this.end = end_date_text
      this.riqi = start_date.split(' ')[0]
      if(this.userInfo.cardid){
        this.$refs.popup.open()
      }else{
        this.$refs.popup1.open()
      }
    },
    isShouquan(){
      let that = this
      wx.login({
        success:(res)=> {
          var code = res.code
          getuseropenid({code}).then(e=>{
            // if(e.data.openid != 'null'){
              wx.setStorageSync('openid', e.data.openid)
              wx.setStorageSync('session_key', e.data.session_key)
              GetUserInfo_openid({openid:e.data.openid}).then(e=>{
                that.isCode = true
                if(e.code == 200){
                  store.commit('baseStore/SET_USERINFO', e.data)
                  setToken(e.data.token)
                }
              }).catch(e=>{
                
              })
            // }else{
            //   that.isCode = false
            //   that.$refs.wxpopup.open()
            // }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.houseDetail {
  @include num();
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .houseTenter{
    flex: 1;
    overflow-y: auto;
  }
  .tenantSwiper{
        width: 100vw;
        height: 56.25vw;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .swiper{
        width: 100vw;
        height: 56.25vw;
      .swiper-item{
        // background: red;
        width: 100vw;
        height: 56.25vw;
        box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
      }
    }
    .num{
      position:absolute;
      bottom: 15px;
      right: 15px;
      span{
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 20px;
      }
    }
  }
  .houseCenter{
    padding: 0 15px;
    padding-top: 24px;
    background: #FFFFFF;
    .top{
      display: flex;
      justify-content: space-between;
      .top-left{
        display: flex;
        .yuan{
          height: 32px;
          font-size: 24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FF5A65;
          line-height: 33px;
          span{
            font-size: 16px;
          }
        }
        .fu{
          margin-top: 10px;
          margin-left: 10px;
          padding: 0 10px;
          height: 20px;
          background: #F5A623;
          background: rgba($color: #F5A623, $alpha: 0.2);
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #F5A623;
          line-height: 20px;
        }
      }
      .top-right{
        border: 0;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        width: 25px;
        img{
          width: 15px;
          height: 15px;
          // background: #9B9B9B;
        }
        div{
          margin-top: 8px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9B9B9B;
          line-height: 11px;
        }
      }
      .top-right::after{
        border: 0;
      }
    }
    .addr{
      margin-top: 8px;
      width: 85%;
      // height: 56px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 28px;
      word-break:break-all;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .detail{
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-bottom: 15px;
      .item{
        width: 32.5%;
        text-align: center;
        .item-top{
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
          line-height: 20px;
        }
        .bom{
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9B9B9B;
          line-height: 17px;
        }
      }
      .shu{
        width: 1px;
        height: 25px;
        border: 1px solid #EFEFEF;
      }
    }
  }
  .ptss{
    background: #FFFFFF;
    margin-top: 10px;
    .pt-top{
      box-sizing: border-box;
      padding-left: 15px;
      height: 45px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 45px;
      padding-left: 15px;
      border-bottom: 2px solid #EFEFEF;
    }
    .pt-list{
      padding: 20px;
      padding-top: 0;
      display: flex;
      flex-wrap: wrap;
      .pt-item{
        padding-top: 20px;
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img{
          width: 22px;
          height: 28px;
          // background: red;
        }
        div{
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 17px;
          text-align: center;
        }
      }
    }
  }
  .fyxq{
    background: #FFFFFF;
    margin: 10px 0 60px 0 ;
    .pt-top{
      box-sizing: border-box;
      padding-left: 15px;
      height: 45px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 45px;
      padding-left: 15px;
      border-bottom: 2px solid #EFEFEF;
    }
    .fyxq-lits{
      padding: 20px;
      padding-top: 5px;
      display: flex;
      flex-wrap: wrap;
      .fy-itme{
        text-align: center;
        padding-top: 15px;
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 17px;
        .fy-one{
          margin-bottom: 5px;
          color: #9B9B9B;
          font-size: 12px;
        }
      }
    }
  }
  .btn{
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 49px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      width: 167px;
      height: 45px;
      background: linear-gradient(138deg, #F99E30 0%, #FF774E 100%);
      border-radius: 100px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 45px;
      text-align: center;
    }
  }
}
.tips{
    width: 335px;
    // height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin: 20px 0 30px 0;
    }
    .tips-text{
      // height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      line-height: 22px;
    }
    .tips-btn{
      margin-top: 30px;
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      // position: absolute;
      // bottom: 0;
      div{
        height: 50px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 50px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
.tips1{
    width: 335px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin-top: 20px;
    }
    .tips-text{
      margin: 20px 0;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      line-height: 22px;
      padding: 0 20px;
      text-align: center;
    }
    .tips-btn{
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      position: absolute;
      bottom: 0;
      div{
        height: 40px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 40px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
::v-deep .segmented-control{
  height: 45px;
  background: #FFFFFF;
  .segmented-control__text{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFAA58;
    line-height: 45px;
  }
  .segmented-control__item--text{
    border-bottom-width: 3px;
  }
  .segmented-control__item:first-child::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 20px;
    background-color: #EFEFEF;
    // border: 1px solid ;
  }
}
</style>
